<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>error message handling basic example</title>
    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <script src="../../../dist/vue-validator.js"></script>
    <style>
      input.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="email">
        <label for="email">email:</label>
        <validity ref="validity" field="email" v-model="validation" :validators="{
          required: { message: 'required email !!' },
          email: { message: 'invalid email address !!' }
        }">
        <input type="text" 
               @input="$refs.validity.validate()" 
               @focusin="$refs.validity.validate()">
      </div>
      <ul class="errors">
        <li v-for="error in validation.result.errors">
          <p :class="error.validator">{{error.field}}: {{error.message}}</p>
        </li>
      </ul>
    </div>
    <script>
      new Vue({
        validators: {
          email: function (val) {
            return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(val)
          }
        },
        data: {
          validation: { result: {} }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
